import React, { FC, useEffect, useState } from 'react'
import {inject,observer} from 'mobx-react'
import { useNavigate, useParams } from 'react-router-dom'
import { ajax } from '../../../api'
import { Image, Tag } from 'antd'
import Myhead from '../../../components/myhead'
import { baseURL } from '../../../api/request'
import moment from 'moment'
import { annoTypeList, vipList } from '../../../utils'
import {
    DingtalkOutlined
  } from '@ant-design/icons';
 const AnnoDetailed:FC<any>=()=> {
    const [obj,setObj] = useState<any>(null)
    const params = useParams()
    const navigate = useNavigate()
     //获取公告信息，
     useEffect(()=>{
        ajax.getannoone({
            _id:params.aid 
        })
        .then(res=>{
            if(res.code==200){
                setObj(res.result)
            }
        })
    },[])
    
  return (
    <div style={{position:"relative"}} className="paddingtop">
        <Myhead title="公告详情" back={true}></Myhead>
        <div>
        {
                    obj&&<div
                    style={{padding:"0.1rem",borderRadius:"10px",width:"100%",height:"auto",overflow:"auto",position:"relative"}}
                    >
                        <p style={{textAlign:"center",fontSize:"0.2rem",fontWeight:700}}>
                            {obj.title}
                        </p>
                        <div style={{width:"100%",height:"2rem",display:"flex",alignItems:"center",flexDirection:"column",}}>
                            <Image src={obj.desc.replace(/public/,baseURL)} preview={false} style={{width:"100%",height:"2rem"}}></Image>
                        </div>
                        
                        <div style={{marginTop:"0.1rem",borderTop:"1px solid #333",paddingTop:"0.1rem",marginBottom:"0.1rem"}}>
                            <span style={{display:"inline-block",marginRight:"20px"}}>{obj.info.username} </span> 
                            <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==obj.type)?.color}>
                            {vipList.find(v=>v.value==obj.type)?.label}
                            </Tag>
                            
                            <span> {moment(obj.time).format("YYYY-MM-DD HH:mm:SS")}</span>
                        </div>
                        <Tag color={  annoTypeList.find((item:any)=>item.value==obj.type)?.color}> 
                                {annoTypeList.find((item:any)=>item.value==obj.type)?.label}
                            </Tag>

                        <div style={{padding:"0.1rem",color:"#333",fontSize:"0.18rem",}}>
                            {obj.content}
                        </div>
                        


                    </div>

                }
        </div>
    </div>
  )
}
export default AnnoDetailed